<template>
	<view class="pop-order-choose-pay">
		<u-popup ref="store_cart_pop" bgColor="#ffffff" :show="show_pop" mode="bottom" :closeOnClickOverlay="true"
			round="30" @close="handleClose" @open="handleOpen">
			<view class="info-modal-wrap">
				<view class="info-modal-inner">
					<view class="modal-head flex-center">
						<view class="title-box">
							<!-- 选择支付方式 -->
							支付方式
						</view>
					</view>

					<view class="modal-ctx">
						<!-- <w_empty v-if="!carts.length"></w_empty> -->
						<scroll-view scroll-y scroll-with-animation class="scroll-container">
							<view class="pay-wrap">
								<view class="pay-list">
									<view class="pay-item" @click="togglePay('weixin')">
										<view class="icon-box">
											<image src="@/static/payment/type-weixin.png" mode=""></image>
										</view>
										<view class="title">
											微信支付
										</view>
										<view class="check-box">
											<text>

											</text>
											<image v-if="pay_type_value == 'weixin'" src="@/static/common/radio1.png" mode="">
											</image>
											<image v-else src="@/static/common/radio0.png" mode=""></image>
										</view>
									</view>

									<view class="pay-item" @click="togglePay('yue')">
										<view class="icon-box">
											<image src="@/static/payment/type-yue.png" mode=""></image>
										</view>
										<view class="title">
											余额支付(可用:￥{{my_info.money || 0}})
										</view>
										<view class="check-box">
											<!-- <text v-if="pay_type_value">
												需组合付款
											</text> -->
											<image v-if="pay_type_value == 'yue'" src="@/static/common/radio1.png" mode=""></image>
											<image v-else src="@/static/common/radio0.png" mode=""></image>
										</view>
									</view>

									
									<view class="pay-item" @click="togglePay('yongjin')">
										<view class="icon-box">
											<image src="@/static/payment/yongjin.png" mode=""></image>
										</view>
										<view class="title">
											佣金支付(可用:￥{{my_info.commission || 0}})
										</view>
										<view class="check-box">
											<text>
											</text>
											<image v-if="pay_type_value == 'yongjin'" src="@/static/common/radio1.png" mode=""></image>
											<image v-else src="@/static/common/radio0.png" mode=""></image>
										</view>
									</view>
									
									
									<view class="pay-item" @click="togglePay('xianxia')">
										<view class="icon-box">
											<image src="@/static/payment/type-xianxia.png" mode=""></image>
										</view>
										<view class="title">
											线下支付
										</view>
										<view class="check-box">
											<text>

											</text>
											<image v-if="pay_type_value == 'xianxia'" src="@/static/common/radio1.png" mode="">
											</image>
											<image v-else src="@/static/common/radio0.png" mode=""></image>
										</view>
									</view>


								</view>
							</view>
						</scroll-view>
					</view>

					<view class="modal-foot">
						<view class="footer-wrap ">
							<view class="btns flex-between">
								<view class="btn btn-confirm  flex-center" @click="doConfirmPay()">
									确定
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		components: {

		},
		data() {
			return {
				show_pop: false,
				order_id: '',
				info: {},
				my_info: {},

				//
				order: {},
				pay_type_value: 'weixin',
				valueMap: {
					'weixin': {
						value: 'weixin',
						title: '微信支付',
					},
					'yue': {
						value: 'yue',
						title: '余额支付',
					},
					'xianxia': {
						value: 'xianxia',
						title: '线下支付',
					},
				},
				myInfo: {},
				orderPrice: 0
			}
		},
		computed: {
			...mapState([
				//
			]),
			pay_type_value_zuhe() {
				return false;
			}
		},
		watch: {

		},
		methods: {
			init(info = {}) {
				this.orderPrice = info.price;
				this.show_pop = true;
				this.query_user();
			},

			query_user() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'users_userInfo',
					},
				}).then(res => {
					if (res.code == 200) {
						this.my_info = res.data;
					}
				})
			},

			togglePay(value) {
				if (value == 'yue') {
					// if(this.myInfo.price > 0 && this.myInfo.price < this.orderPrice) {
					// 	this.$alert('余额不足！可使用组合支付')
					// 	this.pay_type_value = 2;
					// 	return
					// } else 
					if (this.myInfo.money < this.orderPrice) {
						this.$alert('余额不足！')
						this.pay_type_value = 'weixin';
						return
					}
				}
				this.pay_type_value = value;
			},

			handleClose() {
				this.show_pop = false;
			},
			handleOpen() {},
			doClose() {
				this.show_pop = false;
			},
			doConfirmPay() {
				if (!this.pay_type_value) {
					this.$alert('请选择支付方式')
					return
				}

				this.$emit('confirm', this.pay_type_value)
				this.show_pop = false;
			},
		},
	}
</script>

<style lang="scss" scoped>
	.pop-order-choose-pay {
		// position: relative;
		// z-index: 1000;
	}


	.info-modal-wrap {
		width: 574rpx;
		width: 660rpx;
		width: 100%;
		position: relative;
		text-align: left;
		padding-bottom: 0;
		// padding-bottom: calc(64rpx + constant(safe-area-inset-bottom));
		// padding-bottom: calc(64rpx + env(safe-area-inset-bottom));

		.info-modal-inner {
			border-radius: 16rpx;
			overflow: hidden;
			width: 100%;
			padding: 0 0;
			padding-bottom: 0;
			min-height: 400rpx;
			background: #FFFFFF;
		}
	}



	.modal-head {
		padding: 24rpx 40rpx;
		// border-bottom: 1rpx solid #DDDDDD;
		padding-right: 0;

		.title-box {
			flex: 1;
			overflow: hidden;
			padding-right: 30rpx;
			text-align: center;

			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
		}
	}


	.modal-ctx {
		width: 100%;
		background-color: #fff;
		padding: 0 32rpx;
		min-height: 400rpx;
		padding-bottom: 30rpx;
	}


	.scroll-container {
		max-height: calc(100vh - 600rpx);
	}


	.pay-wrap {}

	.footer-wrap {
		box-shadow: 0rpx -8rpx 20rpx 2rpx rgba(0, 0, 0, 0.06);
		padding: 20rpx;

		.safe-fixed-bottom {
			position: relative;
		}

		.btns {
			.btn {
				flex: 1;
				width: 100%;
				height: 80rpx;

				border-radius: 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;

				&.btn-cancel {
					background: #ddd;
					color: #666;
				}

				&.btn-confirm {
					background: #CB0011;
				}


				&+.btn {
					margin-left: 24rpx;
				}
			}
		}
	}




	.pay-list {
		padding: 0 0rpx;
		background: #FFFFFF;

		.pay-item {
			height: 88rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;


			&+.pay-item {
				border-top: 1rpx solid #EAEAEA;
			}

			.icon-box {
				width: 40rpx;
				height: 40rpx;

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.title {
				margin-left: 30rpx;
				flex: 1;
				overflow: hidden;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
			}

			.check-box {
				display: flex;
				align-items: center;

				text {
					margin-right: 10rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
</style>